<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格的增删改查-两个模态框合一版-part2</title>
	<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		span {
			color: red;
			padding-left: 12px;
		}
	</style>
</head>
<body>
<div>

</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg addTable" data-toggle="modal" data-target="#myModal">
	新增
</button>
<!--表格部分-->
<div>
	<table class="table table-hover table-striped">
		<thead>
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>1</td>
			<td>张开</td>
			<td>18</td>
			<td>
				<button class="btn btn-danger btn-sm delTable">删除</button>
				<button class="btn btn-info btn-sm editTable">编辑</button>
			</td>
		</tr>
		<tr>
			<td>2</td>
			<td>李开</td>
			<td>18</td>
			<td>
				<button class="btn btn-danger btn-sm delTable">删除</button>
				<button class="btn btn-info btn-sm editTable">编辑</button>
			</td>
		</tr>
		<tr>
			<td>3</td>
			<td>王开</td>
			<td>18</td>
			<td>
				<button class="btn btn-danger btn-sm delTable">删除</button>
				<button class="btn btn-info btn-sm editTable">编辑</button>
			</td>
		</tr>
		</tbody>
	</table>
</div>
<!-- 新增/编辑Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
	 data-backdrop="static">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">新增</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="userName">姓名</label>
					<input type="text" class="form-control" id="userName" placeholder="username">
					<span class="userNameErr"></span>
				</div>
				<div class="form-group">
					<label for="age">姓名</label>
					<input type="text" class="form-control" id="age" placeholder="age">
					<span class="ageErr"></span>
				</div>
			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary save">保存</button>
			</div>
		</div>
	</div>
</div>
<pre>
新增的需求：
	点击新增按钮，弹出一个模态框
	模态框中的input框的值需要手动的清理掉(默认，input框输入值，如果不刷新，值一直在)
	点击取消(close)按钮，关闭模态框，其它的什么也不做(不会修改任何数据)
编辑的需求：
	点击某一行的编辑按钮，弹出一个模态框，并且需要获取当前行的姓名和年龄，取出来，放到模态框中的input框中
	当用户修改之后，点击模态框的保存按钮，就将用户修改后的input框的值取出来，再覆盖到原来的(要编辑)行上去。
	重点：在点击保存按钮的时候，如何确定要覆盖到哪一行
	点击取消(close)按钮，关闭模态框，其它的什么也不做(不会修改任何数据)
删除的需求：
	点击某一行的删除按钮，就直接将当前行删掉
	然后再手动的整理下各个行的序号，要保证操作之后，剩余的各个行的序号还是有序的
bootstrap3的模态框：https://v3.bootcss.com/javascript/#modals
	有两种开启关闭方式：
		方式1，通过属性来
			点击新增按钮，需要给这个按钮设置两个属性开启模态框
				data-toggle="modal" data-target="#myModalAdd"
			关闭模态框，就是为点击的按钮设置 data-dismiss="modal" 属性，来达到关闭模态框的目的
		方式2，通过js代码
			为新增按钮绑定一个click事件，在事件内部，写 $('#myModal').modal("show");
			关闭模态框，就是为点击的按钮绑定一个click事件，在事件内部，写 $('#myModal').modal("hide");
jQuery的data方法 https://www.w3school.com.cn/jquery/data_jquery_data.asp
	添加数据
		$('.save').data("属性", 属性值)
			属性值可以是数字/字符串/标签对象
		$('.save').data("属性", 属性值)
	删除数据
		$('.save').removeData("属性")

javascript的关系运算
	https://www.cnblogs.com/Neeo/articles/15895731.html#%E5%85%B3%E7%B3%BB%E8%BF%90%E7%AE%97%E7%AC%A6
javascript的数组的includes方法，如果数组包含指定的值，就返回true，否则返回false

</pre>
</body>
<script src="./jquery.min.js"></script>
<script src="./bootstrap.min.js"></script>
<script>
	// 这个版本的标记是根据jquery 的data方法来做的
	// 点击新增按钮，弹出模态框，当用户输入数据之后，拿到数据，并生成一行，放到表格中
	$('.addTable').click(function () {
		//开启和关闭模态框，都有属性来干了，这里我们不需要处理了
		$("#userName").val("");
		$("#age").val("");
		// 为模态框的title赋值
		$("#myModalLabel").text('新增');
		// 清空所有的带有currentTr类属性，保证新增弹出来的模态框，点击其保存按钮时，走的是新增的逻辑
		$(".save").removeData('currentTr');

	});
	// 点击编辑按钮
	$("tbody").on('click', '.editTable', function () {
		// 点击编辑按钮也清空下错误提示，防止有出现弹出模态框编辑之后没通过校验就关闭模态框的情况
		// 此时再次打开模态框，错误提示还是有的，所以要清空下
		cleanErrorMsg()
		// 根据编辑按钮，找到父标签的兄弟标签(name,age)，获取到其中的值，然后放到模态框中的input框中
		var name = $(this).parent().parent().children().eq(1).text();
		var age = $(this).parent().parent().children().eq(2).text();
		// 将值添加到input框中去
		$("#userName").val(name);
		$("#age").val(age);
		// 将当前行的tr标签当做一个属性值，绑定到模态框的保存按钮上，同时作为一个标记
		$(".save").data('currentTr', $(this).parent().parent());
		// 为模态框的title赋值
		$("#myModalLabel").text('编辑');

		$('#myModal').modal("show");
	})

	// 专门做校验的函数
	function checkData(name, age) {
		let arr = []
		//对于name字段来说，只需要校验不能为空就行
		if (name === '') {
			$(".userNameErr").text("用户名不能为空");
			arr.push(false)
		}
		if (!(age != '' && 0 <= age && age <= 100)) {
			$(".ageErr").text(`年龄范围必须是1-100之间，你输入的是${age}`)
			arr.push(false)
		}
		// 后续要根据这个数组中的是否包含false来进行判断，所以要返回
		return arr
	}

	// 清空下可能存在的错误提示
	function cleanErrorMsg() {
		$(".userNameErr").text("");
		$(".ageErr").text("")
	}

	$(".save").click(function () {
		// 每次保存之前都要先清空下可能存在的错误提示，然后再重新判断输入的值是否合法
		cleanErrorMsg()
		// 获取用户名和年龄
		var name = $("#userName").val();
		var age = $("#age").val();
		var arr = checkData(name, age)
		// 如果校验的函数返回的数组不包含false，就表示输入的数据是合法的，那就正常的执行保存逻辑
		// 如果包含false，表示输入的数据不合法，模态框不隐藏，并且给用户提示，让用户重新输入值
		if (!arr.includes(false)) {
			// 把标记取出来
			var currentTr = $(".save").data("currentTr");
			// 根据标记来决定接下来的保存动作是编辑还是添加
			if (currentTr === undefined) { // 如果是添加，那么标记是空的，$(".save").data("currentTr")值是undefined
				// 表示是新增逻辑
				var num = $("tbody tr").length + 1;
				// console.log(111, name, age, num);
				var tr = `<tr>
					<td>${num}</td>
					<td>${name}</td>
					<td>${age}</td>
					<td>
						<button class="btn btn-danger btn-sm delTable">删除</button>
						<button class="btn btn-info btn-sm editTable">编辑</button>
					</td>
				</tr>`
				$("tbody").append(tr);
			} else {
				// 编辑保存的逻辑
				currentTr.children().eq(1).text(name);
				currentTr.children().eq(2).text(age);
				currentTr.removeClass('currentTr');
			}
			// 关闭模态框
			$('#myModal').modal("hide");
		}
	})
	// 删除姿势之一，这种代码简单，比较好理解，但是每删一行，所有行的需要无论需不需要处理，它都重新整理了一下，效率不高
	// $("tbody").on('click', '.delTable', function () {
	// 	$(this).parent().parent().remove();
	// 	$("tbody tr td:first-child").each(function (index) {
	// 		// console.log(444, $(this).text(), index);
	// 		$(this).text(index + 1);
	// 	})
	// })
	// 删除的其它姿势，推荐，因为只需要处理要删除的当前行的后面的所有行的序号，之前行的序号不需要处理，效率高些
	// 可能不太好理解，而且代码稍难一些
	$("tbody").on('click', '.delTable', function () {
		$(this).parent().parent().nextAll().each(function () {
			var num = $(this).children().eq(0).text();
			$(this).children().eq(0).text(num - 1);
		})
		$(this).parent().parent().remove();
	})


</script>
</html>